<!--
  文件名: Blog.vue
  描述: 这是一个博客内容部分，展示博客整体，还有评论功能
  作者: 白紫铜
  创建日期: 2024-03-29
-->
<template>
<div>
  <el-container>
    <el-aside style="width: 100px;"></el-aside>
    <el-main style="width: 1050px;">
      <el-row>
        <el-col style="background-color: #F5F7FA; box-shadow: 0 8px 16px rgba(0,0,0,0.1)">
          <h1 style="margin: 50px" v-html="article.title"></h1>
          <el-divider />
          <div style="margin: 50px;" v-html="article.content"/>
        </el-col>
        <el-col style="background-color: #F5F7FA; box-shadow: 0 8px 16px rgba(0,0,0,0.1)">
          <el-tooltip content="收藏">
          <el-button class="button"><el-icon style="font-size: 40px"><StarFilled /></el-icon></el-button>
          </el-tooltip>
          <el-tooltip content="评论">
          <el-button class="button" @click="showComment=true"><el-icon style="font-size: 40px"><ChatLineSquare /></el-icon></el-button>
          </el-tooltip>
        </el-col>
      </el-row>
    </el-main>
    <el-aside style="width: 300px;">
      <el-col style="background-color: #F5F7FA; box-shadow: 0 8px 16px rgba(0,0,0,0.1);height: 300px">
        <div style="margin-top: 50px"></div>
        <div style="display: flex; align-items: center; margin: 10px">
          <el-link @click="gotoUserInfo"><el-avatar :size="50" :src="avatarUrl"></el-avatar></el-link>
          <div style="margin-left: 10px;">
            <el-link @click="gotoUserInfo">{{userName}}</el-link>
            <div style="margin: 15px"></div>
            <div>{{introduce}}</div>
          </div>
        </div>
        <div style="display: flex; align-items: center; margin: 10px">
        <div style="margin-top: 50px"></div>
        <el-col style="text-align: center;align-items: center">
          <span>粉丝{{counts[1]}}</span>
          <span style="margin: 0 10px"></span>
          <span>关注{{counts[0]}}</span>
          <span style="margin: 0 10px"></span>
          <span>文章数{{posts_counts}}</span>
        </el-col>
        </div>
      </el-col>
    </el-aside>
  </el-container>
  <!-- 抽屉组件 -->
  <el-drawer title="评论" v-model="showComment" :with-header="false" direction="ltr">
    <!-- 在这里显示评论内容 -->
    <div v-for="comment in comments" :key="comment.Id" class="comment-container">
      <div class="avatar-container">
        <el-avatar :size="50" :src="comment.userDTO.avatarUrl" alt="评论头像"/>
      </div>
      <div class="comment-content">
        <p class="comment-username">{{ comment.userDTO.username }}</p>
        <p class="comment-text">{{ comment.content }}</p>
        <p class="comment-time">{{ formatDate(comment.createdAt) }}</p>
      </div>

    </div>
    <div ref="loadMoreTrigger" style="height: 10px;"></div>
    <div>
      <el-avatar style="margin-right: 10px" :size="50" :src="user_avatar_url"></el-avatar>
    <el-input
        v-model="user_comment"
        style="width: 300px"
        :rows="2"
        autosize
        type="textarea"
        placeholder="在此输入评论"
    />
      <div style="margin-top: 50px"></div>
      <el-button @click="publishComment" class="comment_button">发布评论</el-button>
    </div>
  </el-drawer>
</div>
</template>
<script>
import axios from "axios";
import {ChatLineSquare, StarFilled} from "@element-plus/icons-vue";

export default {
  name:"BlogDetails",
  components: {ChatLineSquare, StarFilled},
  data(){
    return{
      article: {}, // 存储文章信息
      comments: [], // 存储评论列表
      commentForm: { content: "" }, // 评论表单
      username: "", // 当前登录用户的用户名，可从本地存储或用户登录状态中获取
      userName:"",
      introduce:"",
      avatarUrl:"",
      showComment:false,
      user_comment:"",
      user_avatar_url:"",
      post_id:"",
      page:0,
      pageSize:20,
      user_id:"",
      counts:[],
      posts_counts:0,
    }
  },
  created() {
    this.username=localStorage.getItem("username")
    this.user_avatar_url=localStorage.getItem("avatarUrl")
    this.post_id=this.$route.params.post_id
  },
  mounted() {

    const post_id=this.$route.params.post_id;
    // 根据文章ID获取文章内容
    axios.get("http://localhost:1145/blog_details",{
      params:{
        post_id: post_id
      }
    })
        .then((response) => {
          this.article = response.data;
          this.userName=this.article.author.username;
          this.avatarUrl=this.article.author.avatarUrl;
          this.introduce=this.article.author.introduce;
          this.user_id=this.article.author.user_id;
          this.getFollowCount()
        })
        .catch((error) => {
          console.error("获取文章内容失败", error);
        });
    this.getComments()
  },
  beforeUnmount() {
    if(this.observer){
      this.observer.disconnect()
    }
  },
  methods:{
    publishComment(){
      const token=localStorage.getItem('token')
      axios.post("http://localhost:1145/api/post_comment",{
        postId:this.$route.params.post_id,
        userId:localStorage.getItem("user_id"),
        content:this.user_comment
      },{
        headers:{
          Authorization:`Bearer ${token}`
        }
      }).then(response=>{
        this.$message.success("评论发布成功")
        console.log(response.data)
      })
    },
    getComments(){
      // 获取评论列表
      axios.get("http://localhost:1145/get_comments", {
        params: {
          postId: this.post_id,
          page:this.page,
          pageSize:this.pageSize
        }
      })
          .then((response) => {
            console.log(response.data)
            this.comments = this.comments.concat(response.data.content);
          })
          .catch((error) => {
            console.error("获取评论失败", error);
          });
    },
    handleIntersection(entries){
      entries.forEach(entry=>{
        if(entry.isIntersecting){
          this.getComments()
        }
      })
    },
    formatDate(dateTime) {
      const date = new Date(dateTime);
      // 获取日期的年、月和日
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1，并且确保是两位数
      const day = String(date.getDate()).padStart(2, '0'); // 日，确保是两位数

      // 拼接成日期格式
      return `${year}-${month}-${day}`;
    },
    gotoUserInfo(){
      this.$router.push({name:"UserInfo",params:{user:encodeURIComponent(this.userName)}})
    },
    getFollowCount(){
      axios.get("http://localhost:1145/get_follow_count",{
        params:{
          user_id:this.user_id
        }
      }).then(response=>{
        this.counts=response.data
      })
      axios.get("http://localhost:1145/get_posts_counts",{
        params:{
          user_id:this.user_id
        }
      }).then(response=>{
        this.posts_counts=response.data;
      })
    }
  },
}
</script>

<style scoped>
.el-link{
  color: black;
  text-decoration: none !important;
}
.el-link:hover{
  color: #606266;
  border-bottom: none !important;
  text-decoration: none !important;
}
.el-link::after{
  color: #606266;
  border-bottom: none !important;
  text-decoration: none !important;
}
.button{
  background-color: transparent;
  border: none;
}
.button:hover{
  background-color: #F5F7FA;
}
.button:focus{
  background-color: #F5F7FA;
}
.comment-container {
  display: flex;
  margin-bottom: 20px;
}

.avatar-container {
  margin-right: 10px;
}

.comment-content {
  flex-grow: 1;
}

.comment-text {
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 5px;
}
.el-textarea{
  --el-input-focus-border-color:#000000;
}
.comment_button{
  color: white;
  background-color: black;
  border-color: black;
}
.comment_button:hover{
  color: #F5F7FA;
  background-color: #606266;
  border-color: #606266;
}
.comment_button:focus{
  color: #F5F7FA;
  background-color: #606266;
  border-color: #606266;
}
.comment-time {
  color: #999; /* 可以根据需要调整颜色 */
  font-size: 12px; /* 可以根据需要调整字体大小 */
  margin-top: 5px; /* 可以根据需要调整顶部间距 */
}
.comment-username {
  font-weight: bold; /* 加粗 */
  color: #333; /* 可以根据需要调整颜色 */
  margin-bottom: 5px; /* 可以根据需要调整底部间距 */
}
.el-link{
  color: black;
  text-decoration: none !important;
}
.el-link:hover{
  color: #606266;
  border-bottom: none !important;
  text-decoration: none !important;
}
.el-link::after{
  color: #606266;
  border-bottom: none !important;
  text-decoration: none !important;
}
</style>